<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="shortcut icon" href="/static/paper/favicon.ico">
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="/static/paper/styles/common.css">
    <link rel="stylesheet" href="/static/paper/styles/login.css">
    <link rel="stylesheet" href="/static/paper/styles/icon/iconfont.css" />
    <style>
        .forgot-password {
            display: flex;
            justify-content: flex-end; /* 使链接靠右对齐 */
            margin-top: 10px; /* 上边距 */
        }
    </style>
</head>

<body>
    <div class="login" id="login-app" style="background: linear-gradient(135deg, #292a3a, #536976); width: 100%; height: 100vh;">
        <div class="login-box">
            <div class="login-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                    <div class="login-form-title">
                        <img src="/static/paper/images/login/logo.png" style="width:239px;height:42px;" alt="" />
                    </div>
                    <span class="manage">日报管理系统</span>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
                            maxlength="20" style="margin-top: 25px" prefix-icon="iconfont icon-user" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码"
                            prefix-icon="iconfont icon-lock" maxlength="20" @keyup.enter.native="handleLogin" />
                    </el-form-item>
                    <!--<div class="forgot-password">
                        <el-link type="primary" @click.prevent="goToResetPassword">忘记密码?</el-link>
                    </div>-->
                    <el-form-item style="width:100%;">
                    <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
                               @click.native.prevent="handleLogin">
                        <span v-if="!loading" style="color: #ffffff;">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
                    <!--<el-button class="register-btn" type="success" @click="goToRegister">注册</el-button>-->
                </el-form>
            </div>
        </div>


    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"
        integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="/static/paper/plugins/vue/vue.js"></script>
    <script src="/static/paper/plugins/element-ui/index.js"></script>
    <script src="/static/paper/plugins/axios/axios.min.js"></script>
    <script src="/static/paper/js/request.js"></script>
    <script src="/static/paper/js/validate.js"></script>
    <script src="/static/paper/api/login.js"></script>
    <script>
        new Vue({
            el: '#login-app',
            data() {
                return {
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    registerForm: {
                        email: '',
                        username: '',
                        password: ''
                    },
                    loading: false,
                    registerDialogVisible: false
                }
            },
            computed: {
                loginRules() {
                    const validateUsername = (rule, value, callback) => {
                        if (value.length < 1) {
                            callback(new Error('请输入用户名'))
                        } else {
                            callback()
                        }
                    }
                    const validatePassword = (rule, value, callback) => {
                        callback()
                    }
                    return {
                        'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                        'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
                    }
                },

            },
            methods: {
                async handleLogin() {
                    this.$refs.loginForm.validate(async (valid) => {
                        if (valid) {
                            this.loading = true;
                            let res = await loginApi(this.loginForm)
                            if (String(res.status) === 'success') {
                                localStorage.setItem('userInfo', JSON.stringify(res.data))
                                console.log("打印信息:", JSON.stringify(res.data))
                                window.location.href = '/static/paper/index.html'
                            } else {
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }
                    })
                },
                goToRegister() {
                    window.location.href = '/static/paper/page/login/register.html';
                },
                goToResetPassword(){
                    window.location.href = '/static/paper/page/login/edit_pwd.html';
                }



            }
        })
    </script>
</body>

</html>
